import React, {FC} from 'react';
import "./index.less";
import {useRequest} from "ahooks";
import * as API from "@/services";
import {Outlet, useLocation, history} from "umi";
import {Empty, Spin} from "antd";
import {JournalPeriodItem} from "@/pages/JournalPage/JournalDetail/commons/JournalPeriodItem";
import querystring from "query-string";
import {FrontJournalPeriodCollection} from "@/services";
import HxPagination from '@/components/HxPagination';

interface FFavoriteJournalPeriodProps {
}

/**
 * 期刊收藏 页面
 */
const FavoriteJournalPeriod: FC<FFavoriteJournalPeriodProps> = (props) => {
  const redordsReq = useRequest((p) => API.queryMineFavPeriods({
    pageSize: 20,
    ...p,
  }), {
    refreshDeps: []
  });
  const data = (redordsReq.data?.data || []).filter((item) => !!item.period);

  return (
    <div className={"favorite-journal-period-container"}>
      <Spin spinning={redordsReq.loading}>
        <div className={"favorite-journal-period-list"}>
          {
            data.length > 0 ? (
              data.map((item) => (
                <JournalPeriodItem
                  key={item.id}
                  showTitle={true}
                  item={item?.period}
                  journal={item?.period?.journal}
                  onClick={() => {
                    const url = `/journal/${item?.period?.journal?.id}/archive/period?${querystring.stringify({
                      periodId: item?.period?.id,
                      periodDisplayType: "tree"
                    })}`;
                    window.open(url, '_blank'); // 在新窗口打开
                    /*history.push({
                      pathname: `/journal/${item?.period?.journal?.id}/archive/period`,
                      search: querystring.stringify({periodId: item?.period?.id}),
                    })*/
                  }}
                  onJournalPeriodChange={(period) => {
                    redordsReq?.mutate((oldData) => {
                      const ret = {
                        ...oldData,
                        data: oldData!.data.map((d) => {
                          if (d.period?.id === period.id) {
                            return {
                              ...d,
                              period
                            }
                          }
                          return d;
                        })
                      } as API.RespPageResult<API.FrontJournalPeriodCollection>;
                      return ret;
                    })
                  }}
                />
              ))
            ) : (
              <Empty/>
            )
          }
        </div>
        {
          redordsReq.data && (
            <div className={"hx-pagination-wrapper"}>
              <HxPagination size="default"
                            total={redordsReq.data?.total}
                            current={redordsReq.data.current}
                            pageSize={redordsReq.data.pageSize}
                            onChange={(pageNum, pageSize) => {
                              redordsReq.run({
                                page: pageNum,
                                pageSize
                              })
                            }}
              />
            </div>
          )
        }
      </Spin>
    </div>
  );
};

export default FavoriteJournalPeriod;
